import FontIcon from './FontIcon'
import Button from './Button'
import Group from './Group'
import {compose, withState} from 'recompose'
import {Input, Popover} from 'antd'


const EditPopver = ({save, type, title, name, label, state: {v, show}, value, setState}) => {

    const content = (
        <div>
            {type == 'textArea'
                ? <Input.TextArea rows={4} defaultValue={v} onChange={x => setState({v: x.target.value, show})}/>
                : <Input defaultValue={v} onChange={x => setState({v: x.target.value, show})}/>
            }

            <Group marginTops={['1rem', '1rem']} spans={[10, 10]} offsets={[0, 2]}>
                <Button title='保存'
                        type='primary'
                        onClick={() => {
                            save && save({name, value: v});
                            setState({v, show: false})
                        }}
                />
                <Button title='取消' onClick={() => setState({v, show: false})}/>
            </Group>
        </div>
    );

    const style = {
        fontSize: '1rem',
        minWidth: '5rem',
        textAlign: 'right'
    }

    return (
        <Box width='40rem' flex='flex' justify='flex-start'>
            <label style={style}>{label || 'label'}</label>
            <span style={{margin: '0 1rem 0 5rem', fontSize: '1rem'}}>{value || '--'}</span>
            <Popover content={content}
                     title={title || "title"}
                     trigger="click"
                     visible={!!show}
                     onVisibleChange={x => setState({v, show: !show})}
                     placement="bottom"
            >
                <a><FontIcon onClick={() => setState({v, show: true})} icon='edit' hover='#4499ee'/></a>
            </Popover>
        </Box>
    )
}

export default compose(
    withState('state', 'setState', props => ({
        v: props.value || '',
        show: null
    }))
)(EditPopver)